<template>
    <el-dialog :model-value="state.show" width="372px" height="372px" @close="onClose">
        <div class="sync-channel-progress">
            <el-progress type="circle" :percentage="state.percentage" :status="state.status" :width="300">
                <template #default>
                    <span class="percentage-label">{{ state.msg }}</span>
                </template>
            </el-progress>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import api from '@/api';

interface ProgressState {
    show: boolean;
    device_id: string;
    percentage: number;
    status: 'success' | 'exception' | 'warning';
    total: number;
    current: number;
    msg: string;
    timmer: any;
}

const state = reactive<ProgressState>({
    show: false,
    device_id: '',
    percentage: 0,
    status: 'success',
    total: 0,
    current: 0,
    msg: '',
    timmer: 0,
});

const getProgress = () => {
    api.post('/api/web/device/sync-status', {
        device_id: state.device_id,
    })
        .then((res) => {
            if (res.data && res.data.status) {
                if (res.data.status.sync_ing) {
                    if (res.data.status.total === 0) {
                        state.msg = '等待同步中';
                        state.timmer = setTimeout(getProgress, 300);
                    } else {
                        state.total = res.data.data.total;
                        state.current = res.data.data.current;
                        state.percentage = Math.floor((Number(res.data.status.current) / Number(res.data.status.total)) * 10000) / 100;
                        state.msg = `同步中...[${res.data.status.current}/${res.data.status.total}]`;
                        state.timmer = setTimeout(getProgress, 300);
                    }
                } else {
                    if (res.data.status.error_msg) {
                        state.msg = res.data.status.error_msg;
                        state.status = 'exception';
                    } else {
                        state.status = 'success';
                        state.percentage = 100;
                        state.msg = `同步成功[${res.data.status.current}/${res.data.status.total}]`;
                        setTimeout(() => {
                            state.show = false;
                        }, 3000);
                    }
                }
            }
        })
        .catch((error) => {
            state.status = 'exception';
            state.msg = `code: ${error.code} msg: ${error.msg}`;
        });
};

const open = (deviceId: string) => {
    state.device_id = deviceId;
    state.percentage = 0;
    state.status = 'success';
    state.msg = '';
    state.show = true;
    getProgress();
};

const onClose = () => {
    state.show = false;
};

defineExpose({
    open,
});
</script>

<style scoped lang="scss">
.sync-channel-progress {
    width: 340px;
    height: 340px;
    text-align: center;
    margin: 16px 16px 0 0;

    .percentage-value {
        display: block;
        margin-top: 10px;
        font-size: 28px;
    }

    .percentage-label {
        display: block;
        margin-top: 10px;
        font-size: 20px;
    }
}
</style>
